<template>
    <div class="container">
        <div class="handle-box">
            <span style="padding: 8px">姓名</span>
            <el-input v-model="query.name" placeholder="姓名" class="handle-input mr10"></el-input>
     
            <span style="padding: 8px">手机</span>
            <el-input v-model="query.mobile" placeholder="手机" class="handle-input mr10"></el-input>
            <span style="padding: 8px">标的</span>
            <el-input v-model="query.title" placeholder="标的" class="handle-input mr10"></el-input>
            <span style="padding: 8px">标的ID</span>
            <el-input v-model="query.serverid" placeholder="标的" class="handle-input mr10"></el-input>
            <span style="padding: 8px"></span>
            <el-button type="success" icon="el-icon-search" size="medium" @click="handleSearch">搜索</el-button>
            <!-- <el-button type="warning" size="medium" icon="el-icon-refresh-left" @click="resultClick()">重置</el-button> -->
        </div>
        <div style="padding: 10px">
            <!-- <el-button type="primary" icon="el-icon-document-add" size="medium" @click="createMethod">新建</el-button> -->
            <!-- <span style="padding: 8px"></span> -->
            <el-button type="danger" icon="el-icon-delete" size="medium" @click="delAllSelection">批量删除</el-button>
 

           <el-button type="warning"
                     icon="el-icon-download"
                     size="medium"
                     @click="importPerson">导入</el-button>
          <!-- <el-button type="info"
                     icon="el-icon-upload2"
                     size="medium">
            <a :href="API_PATH+COMPANYUSEREXPORT"
               target="_blank"
               style="color:#fff;">导出</a>
          </el-button> -->

        </div>
        <el-table
            :data="tableData"
            border
            ref="multipleTable"
            header-cell-class-name="table-header"
            @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column label="序号" align="center" width="100" fixed>
                <template slot-scope="scope">{{ scope.$index + (query.pageIndex - 1) * query.pageSize + 1 }}</template>
            </el-table-column>
            <!-- <el-table-column label="股票名称" align="center">
                <template slot-scope="scope">{{ scope.row.title }}</template>
            </el-table-column> -->
           <el-table-column label="案号" align="center">
                <template slot-scope="scope">{{ scope.row.caseno }}</template>
            </el-table-column>
            
            <el-table-column label="用户" align="center">
                <template slot-scope="scope">{{ scope.row.name }}</template>
            </el-table-column>
           <el-table-column label="标的" align="center">
                <template slot-scope="scope">{{ scope.row.title }}</template>
            </el-table-column>
            <el-table-column label="标的ID" align="center">
                <template slot-scope="scope">{{ scope.row.serverid }}</template>
            </el-table-column>
           <el-table-column label="身份证号" align="center">
                <template slot-scope="scope">{{ scope.row.idcard }}</template>
            </el-table-column>
            <el-table-column label="手机" align="center">
                <template slot-scope="scope">{{ scope.row.mobile }}</template>
            </el-table-column>
          
                   <el-table-column label="营业部" align="center">
                <template slot-scope="scope">{{ scope.row.busdepart }}</template>
            </el-table-column>
                   <el-table-column label="服务人" align="center">
                <template slot-scope="scope">{{ scope.row.serverperson }}</template>
            </el-table-column>

            <!-- <el-table-column label="标的(导入标题)" align="center">
                <template slot-scope="scope">{{ scope.row.submatter }}</template>
            </el-table-column> -->
            <!-- <el-table-column label="图片" align="center">
                <template slot-scope="scope">
                    <img :src="docLoadPath+scope.row.url" style="width:60px;height:60px;" alt="" v-if="scope.row.url">
                </template>
            </el-table-column> -->
            <el-table-column label="状态" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.status == 0">启用</span>
                    <span v-if="scope.row.status == 1">禁用</span>
                </template>
            </el-table-column>
            <el-table-column label="创建时间" align="center">
                <template slot-scope="scope">{{ scope.row.create_time}}</template>
            </el-table-column>
            <el-table-column label="操作" width="200" align="center">
                <template slot-scope="scope">
                    <!-- <el-button @click="createBus(scope.row)" type="text" size="small" icon="el-icon-edit">编辑</el-button> -->

                    <el-button @click="backTomycustomer(scope.row)" type="text" size="small" icon="el-icon-edit">编辑</el-button>
                    <el-button @click="handleDelete(scope.row)" type="text" size="small" icon="el-icon-delete" class="red">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                background
                layout="total, prev, pager, next, jumper"
                :current-page="query.pageIndex"
                :page-size="query.pageSize"
                :total="pageTotal"
                @current-change="handlePageChange"
            ></el-pagination>
        </div>
        <!-- 添加修改教练弹框 -->
        <el-dialog
            :title="ruleForm.id ? '编辑' : '新增'"
            :visible.sync="dialogVisible"
            width="50%"
            :close-on-click-modal="false"
            top="2%"
            :before-close="(e) => handleClose(e, 'ruleForm')"
        >
            <el-form :model="ruleForm" ref="ruleForm" :rules="ruleForms" v-loading="loading" status-icon label-width="130px">
                <!-- <el-form-item label="股票名称" prop="title">
                    <el-input v-model.trim="ruleForm.title" placeholder="请输入装饰件名称" style="width: 80%"></el-input>
                </el-form-item> -->
                <!-- <el-form-item label="图片" prop="url">
                    <el-input v-model="ruleForm.url" placeholder="请输入url"></el-input>
                    <img-upload :img-url.sync="ruleForm.url"></img-upload>
                    <p style="padding: 6px; font-size: 12px; color: red">(图片高宽比16:9,格式为png透明图)</p>
                </el-form-item> -->
                <!-- <el-form-item label="状态">
                    <el-radio-group v-model="ruleForm.status">
                        <el-radio :label="0">启用</el-radio>
                        <el-radio :label="1">禁用</el-radio>
                    </el-radio-group>
                </el-form-item> -->
                 <el-form-item label="案号" prop="caseno">
                    <el-input v-model.trim="ruleForm.caseno" placeholder="请输入内容" style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="用户" prop="name">
                    <el-input v-model.trim="ruleForm.name" placeholder="请输入内容" style="width: 80%"></el-input>
                </el-form-item>
                   <el-form-item label="手机" prop="mobile">
                    <el-input v-model.trim="ruleForm.mobile" placeholder="请输入内容" style="width: 80%"  ></el-input>
                </el-form-item>
           

                 <!-- <el-form-item label="描述" prop="content">
                   <el-input v-model="ruleForm.content" :rows="6" type="textarea" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="排序">
                    <el-input v-model.trim="ruleForm.sort" placeholder="请输入排序号" style="width: 80%"></el-input>
                    <p style="padding: 6px; font-size: 12px; color: red">(数字越大越靠前)</p>
                </el-form-item> -->
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="onSubmit()">确 定</el-button>
            </span>
        </el-dialog>
    
       <!-- 转化客户 -->
        <el-dialog
            :title="ruleFormzhcustomer.id ? '编辑资料' : '新增'"
            :visible.sync="dialogVisiblezhCustom"
            width="50%"
            :close-on-click-modal="false"
            top="2%"
            :before-close="(e) => handleClose(e, 'ruleFormzhcustomer')"
        >
            <el-form :model="ruleFormzhcustomer" ref="ruleFormzhcustomer" :rules="ruleForms" v-loading="loading" status-icon label-width="130px">
                <el-form-item label="股票名称" prop="title">
                    <el-input v-model.trim="ruleFormzhcustomer.title" placeholder="请输入装饰件名称" style="width: 80%"></el-input>
                </el-form-item>
              


                <!-- <el-form-item label="状态">
                    <el-radio-group v-model="ruleForm.status">
                        <el-radio :label="0">启用</el-radio>
                        <el-radio :label="1">禁用</el-radio>
                    </el-radio-group>
                </el-form-item> -->
                 <el-form-item label="案号" prop="caseno">
                    <el-input v-model.trim="ruleFormzhcustomer.caseno" placeholder="请输入内容" style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="用户" prop="name">
                    <el-input v-model.trim="ruleFormzhcustomer.name" placeholder="请输入内容" style="width: 80%"></el-input>
                </el-form-item>
                   <el-form-item label="手机" prop="mobile">
                    <el-input v-model.trim="ruleFormzhcustomer.mobile" placeholder="请输入内容" style="width: 80%"  ></el-input>
                </el-form-item>
                <el-form-item label="身份证号" prop="idcard">
                    <el-input v-model.trim="ruleFormzhcustomer.idcard" placeholder="请输入内容" style="width: 80%"  ></el-input>
                </el-form-item>
                    <!-- fileurl -->
                  <el-form-item label="身份证图片" prop="idcardurl">
                    <el-input v-model="ruleFormzhcustomer.idcardurl" placeholder="请输入"></el-input>
                    <img-upload :img-url.sync="ruleFormzhcustomer.idcardurl"></img-upload>
                    <!-- <p style="padding: 6px; font-size: 12px; color: red">(图片高宽比16:9,格式为png透明图)</p> -->
                </el-form-item>



               <el-form-item label="标的" prop="submatter">
                    <el-input v-model.trim="ruleFormzhcustomer.submatter" placeholder="请输入内容" style="width: 80%"  ></el-input>
                </el-form-item>
 
                <el-form-item label="营业部" prop="busdepart">
                    <el-input v-model.trim="ruleFormzhcustomer.busdepart" placeholder="请输入内容" style="width: 80%"  ></el-input>
                </el-form-item>
 
                <el-form-item label="服务人" prop="serverperson">
                    <el-input v-model.trim="ruleFormzhcustomer.serverperson" placeholder="请输入内容" style="width: 80%"  ></el-input>
                </el-form-item>



                  <el-form-item label="备注" prop="mark">
                    <el-input v-model.trim="ruleFormzhcustomer.mark" placeholder="请输入内容" style="width: 80%"  ></el-input>
                </el-form-item>
                 <!-- <el-form-item label="描述" prop="content">
                   <el-input v-model="ruleForm.content" :rows="6" type="textarea" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="排序">
                    <el-input v-model.trim="ruleForm.sort" placeholder="请输入排序号" style="width: 80%"></el-input>
                    <p style="padding: 6px; font-size: 12px; color: red">(数字越大越靠前)</p>
                </el-form-item> -->
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisiblezhCustom = false">取 消</el-button>
                <el-button type="primary" @click="onSubmitbackTomycustomer()">确 定</el-button>
            </span>
        </el-dialog>


            <!-- 导入数据弹框 -->
    <el-dialog title="导入数据"
               :visible.sync="importDialog"
               width="30%"
               center>
      <el-upload class="upload-demo"
                 ref="upload"
                 :action="LOGIN_EXCEL"
                 :before-upload="beforeUpload"
                 :before-remove="beforeRemove"
                 :on-success="handleAvatarSuccess"
                 :file-list="fileList"
                 :auto-upload="false">
        <el-button slot="trigger"
                   size="small"
                   type="success">选取文件</el-button>
        <!-- <el-button
                    style="margin-left: 10px;"
                    size="small"
                    type="success"
                    @click="submitUpload"
                >上传到服务器</el-button>-->
        <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
      </el-upload>
      <div style="display:flex;justify-content:flex-end;margin-top:20px;">
        <el-button type="primary"
                   @click="submitUpload">上传到服务器</el-button>
      </div>
    </el-dialog>
    
    </div>
</template>

<script>
// 诉讼管理
import api from '@/api/index';
import { getdate } from '@/utils/utils';
import imgUpload from '@/components/views/commons/ImgUpload';
export default {
    name: 'decorationcustom',
    components:{imgUpload},
    data() {
        return {
            API_PATH: api.API_PATH,
            COMPANYUSEREXPORT: api.COMPANYUSEREXPORT,
            uploadLogin:false,
           SITEexport: api.API_PATH+api.DECORATIONcustom_export,
           // SITEexport: window.location.hostname=='localhost'?'/'+api.DECORATIONcustom_export:WEBCONFIG.connectPath+api.DECORATIONcustom_export,
               importDialog: false,//导入弹框
            fileList: [],
            LOGIN_EXCEL: api.LOGIN_EXCEL,//导入excel
           
           docLoadPath: api.IMG_PATH,
              id: -1,
            exhibition_id: '',
            query: {
                pageIndex: 1,
                pageSize: 10,
                name: '',
                mobile: ''
            },
            zzTypeist: [],
            pageTotal: 0,
            tableData: [],
            fId: '',
            f_text: '',
            loading: false,
            fTextModel: false,
            dialogVisible: false,
            dialogVisiblezhCustom: false,
            ruleForm: {
                title: '',
                caseno: '',
                status:0,
                name: '',
                mobile: '',
                  mark: '',
                sort:0
            },
            ruleFormzhcustomer: {
                title: '',
                caseno: '',
                status:0,
                name: '',
                mobile: '',
                idcard: '',
                idcardurl: '',
                sort:0,
                //fileurl:'',

              submatter: '',
                 busdepart: '',
                 serverperson: '',
                 mark: '',
            },
            ruleForms: {
                title: [{ required: true, message: '请填写公告名称', trigger: 'blur' }],
                // url: [{ required: true, message: '图片地址', trigger: 'blur' }],
                // content: [{ required: false, message: '请填写内容', trigger: 'blur' }]
            }
        };
    },
    filters: {
        toFixedFile: function (val) {
            if (!val) return '0.00';
            return Number(val).toFixed(2);
        },
        formDate: (val) => {
            if (!val) return '';
            return getdate(val);
        }
    },
    mounted() {
        this.initAjaxMethod();
    },

    methods: {
        //打回
        refuseMethod(data) {
            this.f_text = '';
            this.fTextModel = true;
            this.fId = data.id;
        },
        //删除
        handleDelete(data) {
            this.delAjaxMethod(data.id);
        },
        //编辑
        createBus(row) {
            const ruleForm = {
                title: row.title,
                caseno: row.caseno,
                name: row.name,
                status: row.status || 0,
                mobile: row.mobile,              
                id:row.id
            };
            this.ruleForm = ruleForm;
            this.dialogVisible = true;
        },
        resultClick() {
            this.query.name = '';
            this.query.pageIndex = 1;
            this.initAjaxMethod();
        },
        createMethod() {
            const ruleForm = {
                title: '',
                caseno: '',
                name: '',
                mobile:'',
                status:0
            };
            this.ruleForm = ruleForm;
            this.dialogVisible = true;
        },
        // 转化客户
        backTomycustomer(row) {
            const ruleFormzhcustomer = {
                title: row.title,
                caseno: row.caseno,
                name: row.name,
                status: row.status || 0,
                mobile: row.mobile, 
                idcard: row.idcard, 
                idcardurl: row.idcardurl, 
                submatter: row.submatter, 
                busdepart: row.busdepart, 
                serverperson: row.serverperson,   
                 mark: row.mark,   
                  id:row.id
            };
            this.ruleFormzhcustomer = ruleFormzhcustomer;
            this.dialogVisiblezhCustom = true;
        },


        // 多选操作
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        delAllSelection() {
            let arr = [];
            if (this.multipleSelection.length <= 0) {
                this.$message({
                    type: 'error',
                    message: '请选择一个'
                });
                return false;
            } else {
                this.multipleSelection.forEach((item) => {
                    arr.push(item.id);
                });
                this.delAjaxMethod(arr.join(','));
            }
        },
        delAjaxMethod(ids) {
            this.$confirm('此操作将删除此条信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                const loading = this.$loading({ text: '加载中...' });
                this.$http
                    .post(api.DECORATIONcustom_DEL, { ids: ids })
                    .then((res) => {
                        loading.close();
                        console.log('项目列表', res);
                        if (res.code == 1) {
                            this.$message.success('删除成功');
                            this.query.pageIndex = 1;
                            this.initAjaxMethod();
                        } else {
                            this.$message.error(res.msg);
                        }
                    })
                    .catch((err) => {
                        this.$message.error(err.msg);
                    });
            });
        },
        // 分页导航
        handlePageChange(val) {
            this.$set(this.query, 'pageIndex', val);
            this.initAjaxMethod();
        },
        handleSearch() {
            this.$set(this.query, 'pageIndex', 1);
            this.initAjaxMethod();
        },
        initAjaxMethod() {
            let data = {
                pageIndex: this.query.pageIndex, //[string]	是	当前页
                pageSize: this.query.pageSize, //[string]	是	每页条数
                name: this.query.name,
                mobile: this.query.mobile,
                title: this.query.title, 
                serverid: this.query.serverid, 
            };
            this.$http
                .post(api.DECORATIONcustom_INDEX, data)
                .then((res) => {
                    console.log('财务', res);
                    if (res.code == 1) {
                        this.tableData = Array.isArray(res.data.list) ? res.data.list : [];
                        this.pageTotal = res.data.total;
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    this.$message.error(err.msg);
                });
        },
        //弹框关闭按钮
        handleClose(done, name) {
            if (this.$refs['name']) {
                this.$refs['name'].resetFields();
            }
            done();
        },
        onSubmit() {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    this.loading = true;
                    const url = this.ruleForm.id ? api.DECORATIONcustom_EDIT : api.DECORATIONcustom_ADD;
                    this.$http.post(url, this.ruleForm)
                        .then((res) => {
                            if (res.code == 1) {
                                this.$message.success('操作成功');
                                this.initAjaxMethod();
                                this.dialogVisible = false;
                            } else {
                                this.$message.error(res.msg);
                            }
                            this.loading = false;
                        })
                        .catch(() => {
                            this.loading = false;
                        });
                } else {
                    return this.$message.error('有必填项目未填写');
                }
            });
        },

       //转化 
        onSubmitbackTomycustomer() {
            this.$refs.ruleFormzhcustomer.validate((valid) => {
                if (valid) {
                    this.loading = true;
                    const url = this.ruleFormzhcustomer.id ? api.DECORATIONcustom_EDIT : api.DECORATIONcustom_ADD;
                    this.$http.post(url, this.ruleFormzhcustomer)
                        .then((res) => {
                            if (res.code == 1) {
                                this.$message.success('操作成功');
                                this.initAjaxMethod();
                                this.dialogVisiblezhCustom = false;
                            } else {
                                this.$message.error(res.msg);
                            }
                            this.loading = false;
                        })
                        .catch(() => {
                            this.loading = false;
                        });
                } else {
                    return this.$message.error('有必填项目未填写');
                }
            });
        },

        
        backTomycustomer44(data1){
            let isCheckName=window.sessionStorage.getItem('userName');
            if(isCheckName){
                this.$router.push({path:'/news',query:{zid:this.zid,checkno:this.checkno,hoscode:this.hoscode,checkdate:this.checkdate}});
            }
     
        },

         handleBeforeUpload(response, file, fileList) {
            this.uploadLogin = false;
            if (response.status == 1) {
                this.$message.success('上传成功');
                this.modelList.coverfile.value=response.urlxd;
            } else {
                this.$message.error('上传失败');
            }
        },
        


         //导入
    importPerson () {
      this.importDialog = true
    },
    beforeUpload (file) {
           var FileExt = file.name.replace(/.+\./, '');
            if (['xls','xlsx'].indexOf(FileExt.toLowerCase()) === -1) {            
                this.$message.error('请上传xls、xlsx格式文件！');
                return false;
            }

      console.log("file", file)
    },
    // 删除文件之前的钩子-弹出框询问
    beforeRemove (file) {
      console.log(file)
      // 处理 before-upload验证不通过后触发了on-remove的解决办法
      if (file && file.status == 'success') {
        return this.$confirm('你确定删除这个文件？')
      }
    },

   handleAvatarSuccess (response) {
   
      const loading = this.$loading({ text: '上传中...' });
      if (response.code == 1) {
        this.$http.post(api.DECORATIONcustom_export, { filename: response.data })
          .then((res) => {
            loading.close();
            console.log(res)
            if (res.code == 1) {
              this.importDialog = false
              this.fileList = []
             
               this.initAjaxMethod();
              this.$message({
                type: 'success',
                message: '上传成功!'
              })
            }
          })
      }
    },
    submitUpload () {
      // console.log(this.$refs.upload.submit)
      this.$refs.upload.submit();
    },


    }
};
</script>

<style scoped>
.handle-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 20px;
}
.el-input--small {
    display: initial;
}
.handle-input {
    width: auto;
    display: inline-block;
}
.mr10 {
    margin-right: 10px;
}
.red {
    color: #f56c6c;
}
.green {
    color: #67c23a;
}
</style>